<template>
  <div class="home_menu">
    <el-menu :default-active="menuActive" background-color="#180300" text-color="#fff"
      active-text-color="#ffd04b" class="home_menu_box" :unique-opened="uniqueOpened" router>
      <el-submenu index="5">
        <span slot="title">裁判员</span>
        <el-menu-item index="/referee/certification">注册审核</el-menu-item>
      </el-submenu>

      <el-menu-item @click="logoutBtn()">
        <span slot="title">退出系统</span>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script>
export default {
  name: "HomeMenu",
  props: {},
  data () {
    return {
      userName: this.$store.state.loginUserName,
      userType: this.$store.state.loginType, // 登录会员类型
      menuActive: "", // 导航默认选中
      uniqueOpened: true,
    };
  },
  created: function () {
    this.setMenuActive();
  },
  methods: {
    // 设置选择
    setMenuActive: function () {
      let path = this.$route.path;
      if (path.indexOf("/train/coachTrain") == 0) {
        this.menuActive = "/train/coachTrain";
      } else if (path.indexOf("/referee/certification") == 0) {
        this.menuActive = "/referee/certification";
      } else if (path.indexOf("/referee/exam") == 0) {
        this.menuActive = "/referee/examList";
      } else if (path.indexOf("/train/refereeTrain") == 0) {
        this.menuActive = "/train/refereeTrain";
      } else if (path.indexOf("/coach") == 0) {
        this.menuActive = "/coach/certification";
      } else {
        this.menuActive = path;
      }
    },
    // 退出登录
    logoutBtn: function () {
      let that = this;
      this.$confirm("确认退出?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
        .then(() => {
          that.$store.commit("set_loginToken", "");
          that.$store.commit("set_loginType", "");
          that.$store.commit("set_loginUserId", "");
          that.$store.commit("set_loginUserName", "");
          that.$router.push({
            name: "Login",
          });
        })
        .catch(() => { });
    },
  },
  watch: {
    // 监听路有变化
    $route: "setMenuActive",
  },
};
</script>
